<template>
	<view class="cont_top">
		<up-navbar title="能源额度"
			bgColor="rgba(0,0,0,0)"
			titleStyle="color: #fff"
			leftIconColor="#fff"
			:fixed="false"
			:autoBack="true"></up-navbar>

		<view class="tit">剩余能源（桶）</view>
		<view class="num">{{userinfo.oli_nums}}</view>

		<view class="nav-ber">
			<view v-for="(item,index) in navBer"
				@click="navBertap(index)">
				<image :src="`/static/nav${index + 1}.png`" mode=""></image>
				<text>{{item}}</text>
			</view>
		</view>
		<view class="c-bj"></view>
	</view>

	<view class="title">能源记录</view>

	<view class="record"
		v-for="(item, index) in record"
		@click="$path.navigateTo(`./detail?type=${index}`)">
		<image :src="`/static/record${index + 1}.png`" mode=""></image>
		<view class="tit">{{item}}</view>
		<up-icon name="arrow-right" color="#000000" size="16"></up-icon>
	</view>


	<up-popup mode="center"
		:show="giftShow"
		:round="10"
		:safeAreaInsetBottom="false"
		:closeable="true"
		@close="giftShow = false">
		<view class="presenter">
			<view class="tit">赠送好友</view>

			<view class="input">
				<text>电话号码</text>
				<up-input
					placeholder="请输入好友手机号"
					border="none"
					type="number"
					v-model="phone"></up-input>
			</view>
			<view class="input">
				<text>赠送数量</text>
				<up-input
					placeholder="请输入赠送好友数量"
					border="none"
					type="number"
					v-model="oli_num"></up-input>
			</view>

			<view class="btn" @click="throttle(submit)">确认赠送</view>
			<view class="tips">*所赠送好友必须为系统内好友</view>
		</view>
	</up-popup>

	<up-popup mode="center"
		:show="codeShow"
		:round="10"
		:safeAreaInsetBottom="false"
		:closeable="true"
		@close="codeShow = false">
		<view class="code">

		</view>
	</up-popup>
</template>

<script setup>
	import { timeFormat, throttle } from '@/uni_modules/uview-plus';
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../api/api';
	import { useCounterStore } from '/stores/user';
	import { storeToRefs } from 'pinia'
	import { reactive, ref } from 'vue';
	const use = useCounterStore()
	const { userinfo } = storeToRefs(use)

	const codeShow = ref(false)
	const giftShow = ref(false)
	const navBer = reactive(['网店核销', '扫码使用', '赠送好友'])

	const record = reactive(['额度记录', '赠送记录'])

	function navBertap(index) {
		switch (index) {
			case 0:
				uni.$showMsg("敬请期待")
				break;
			case 1:
				uni.$showMsg("敬请期待")
				break;
			case 2:
				giftShow.value = true
				break;
		}
	}
	const phone = ref('')
	const oli_num = ref('')

	function submit() {
		let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if (!reg_tel.test(phone.value)) return uni.$showMsg('手机号格式不对!')
		if (!oli_num.value) return uni.$showMsg('请输入数量!')

		api.user.user_send_oli({
			phone: phone.value,
			oli_num: oli_num.value
		}).then(res => {
			uni.$showMsg("赠送成功", "success")
			giftShow.value = false

			phone.value = ''
			oli_num.value = ''
		})
	}
</script>

<style lang="scss">
	.cont_top {
		width: 750rpx;
		height: 560rpx;
		position: relative;
		overflow: hidden;

		.tit {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 60rpx 0 20rpx 0;
		}

		.num {
			font-weight: 600;
			font-size: 44rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.c-bj {
			width: 1300rpx;
			height: 1300rpx;
			border-radius: 40%;
			position: absolute;
			top: -800rpx;
			left: -276rpx;
			z-index: -1;
			// transform: translate(10%, 25%);
			background-image: linear-gradient(90deg, #FF9E4C 0%, #FF7316 100%);
		}

		.nav-ber {
			display: flex;
			justify-content: space-between;
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0 0 15rpx #9e9e9e;
			border-radius: 20rpx;
			padding: 32rpx;
			position: absolute;
			left: 32rpx;
			top: 350rpx;
			font-size: 32rpx;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				color: #333333;

				>image {
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 20rpx;
				}
			}
		}

	}

	.title {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		padding: 0 32rpx;
		margin-top: 52rpx;
	}

	.record {
		display: flex;
		align-items: center;
		width: 622rpx;
		height: 156rpx;
		justify-content: space-between;
		margin: 0 auto;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		border-bottom: 2rpx solid #ebebeb;

		image {
			width: 60rpx;
			height: 60rpx;
		}

		.tit {
			width: 70%;
			line-height: 1;
		}
	}

	.record:last-child {
		border: none;
	}

	.presenter {
		width: 604rpx;
		border-radius: 12rpx;
		padding: 52rpx;

		.tit {
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.input {
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			align-items: center;
			height: 100rpx;

			>text {
				margin-right: 52rpx;
			}
		}

		.btn {
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-image: linear-gradient(90deg, #FF9E4C 0%, #FF7316 100%);
			border-radius: 40rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 72rpx auto 0;
		}

		.tips {
			font-weight: 400;
			font-size: 24rpx;
			color: #CCCCCC;
			text-align: center;
			margin-top: 20rpx;
		}
	}
</style>